import { defineComponent } from "vue";
import "./index.less";

const startImg =
  "";
const normalImg =
  "";
const decisionImg =
  "";
const remoteImg =
  "";
const endImg =
  "";

interface flowNode {
  draggable?: boolean;
  src: string;
  dataShape: string;
  dataSize: string;
  dataColor: string;
  dataLabel: string;
  dataName: string;
  style: string;
}
const flowNodes: flowNode[] = [
  {
    src: startImg,
    dataShape: "flow-capsule",
    dataSize: "100*36",
    dataColor: "#00b4a2",
    dataLabel: "开始",
    dataName: "start",
    style: "width:100px;height:36px",
  },
  {
    src: normalImg,
    dataShape: "flow-rect",
    dataSize: "100*36",
    dataColor: "#1890FF",
    dataLabel: "节点",
    dataName: "normal",
    style: "width:100px;height:36px",
  },
  {
    src: decisionImg,
    dataShape: "flow-rhombus",
    dataSize: "100*36",
    dataColor: "#f1ab2b",
    dataLabel: "决策",
    dataName: "decision",
    style: "width:100px;height:36px",
  },
  {
    src: remoteImg,
    dataShape: "flow-rect",
    dataSize: "100*36",
    dataColor: "#a16fd4",
    dataLabel: "远程节点",
    dataName: "remote",
    style: "width:100px;height:36px",
  },
  {
    src: endImg,
    dataShape: "flow-capsule",
    dataSize: "100*36",
    dataColor: "#dc7370",
    dataLabel: "结束",
    dataName: "end",
    style: "width:100px;height:36px",
  },
];
export default defineComponent({
  name: "tb-flow-item",
  setup() {
    return () =>
      flowNodes.map((x) => (
        <div class="flow-item-box">
          <img
            draggable={x.draggable}
            src={x.src}
            data-type="node"
            data-shape={x.dataShape}
            data-size={x.dataSize}
            data-color={x.dataColor}
            data-label={x.dataLabel}
            data-name={x.dataName}
            class="getItem"
            style={x.style}
          ></img>
        </div>
      ));
  },
});
